<template>
	<view class="map-location-container">
		<image class="main-img" :src="api_host + invitaInfo.invitLetter" mode="widthFix" @load="loadImg">
		</image>
		<view class="footer">
			<button type="default" class="nav-btn" @tap="handleNav">导航</button>
			<button type="default" class="footer-btn" :class="invitaInfo.userType === 1 ? 'is-apply': ''"
				@tap="handlePay"
				:disabled="invitaInfo.userType === 1">{{ invitaInfo.userType === 1 ? '已报名': '参会报名'  }}</button>
		</view>

		<!-- 参会报名form表单 -->
		<u-popup :show="show" mode="center" :round="10" @close="close" :customStyle="{maxHeight: '90vh'}">
			<u--form labelPosition="top" class="apply-form" :model="applyForm" ref="uForm">
				<u-form-item label="出席人姓名" required labelWidth="80px" borderBottom ref="exhibName">
					<u--input v-model="applyForm.exhibName" placeholder="请输入出席人姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="单位全称及职务" required borderBottom labelWidth="180px" ref="orgName">
					<u--input v-model="applyForm.orgName" placeholder="请输入单位全称及职务" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" required labelWidth="80px" borderBottom ref="exhibPhone">
					<u--input v-model="applyForm.exhibPhone" type="number" placeholder="请输入联系人电话"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="随行人数" required borderBottom labelWidth="80px" ref="peerNumber">
					<u--input v-model="applyForm.peerNumber" style="number" placeholder="请输入随行人数"
						border="none"></u--input>
				</u-form-item>

				<u-form-item label="到黄时间" required borderBottom ref="item1" @tap="dateOpen" labelWidth="80">
					<u--input v-model="applyForm.departureTime" placeholder="请选择到黄时间" border="none" readonly
						style="background-color: transparent;"></u--input>
					<my-datetime ref="dateTimePop" :shownum="4" :titleShow="true" @ok="timeOk"></my-datetime>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="是否需要到站接车" borderBottom labelWidth="180px" ref="orgName">
					<u-radio-group v-model="applyForm.isReception">
						<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist2" :key="index"
							:label="item.name" :name="item.value" >
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="是否需要预定酒店" borderBottom labelWidth="180px" ref="orgName">
					<u-radio-group v-model="applyForm.isDue" @change="handleChangeOrder">
						<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.value" >
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item v-if="showHotail" label="预定房间数量" borderBottom labelWidth="180px" ref="orgName">
					<u--input v-model="applyForm.roomNumber" type="number" placeholder="请输入预定房间数量" border="none"></u--input>
				</u-form-item>


				<u-form-item label="备注" labelWidth="80px" ref="compName">
					<u--textarea v-model="applyForm.remark" placeholder="请输入内容"></u--textarea>
				</u-form-item>
				<u-form-item labelWidth="80px">
					<u-button type="primary" class="submit-btm" text="确定" @tap="submit"></u-button>
					<view style="height: 12rpx;"></view>
					<u-button text="取消" @tap="handleCancel"></u-button>
				</u-form-item>
			</u--form>
		</u-popup>
	</view>
</template>

<script>
	import {
		invitaionInfo,
		applyInvitaion
	} from '@/common/api_invitation.js'

	import myDatetime from '@/components/my-datetime/my-datetime'

	export default {
		components: {
			myDatetime
		},
		name: '',
		data() {
			return {
				show: false,
				invitaInfo: {},
				applyForm: {
					exhibName: '',
					exhibPhone: '',
					peerNumber: '',
					orgName: '',
					remark: '',
					departureTime: '',
					isDue: 0,
					isReception: 0,
					roomNumber: ''
				},
				radiolist1: [{
					name: '否',
					value: 0
				},{
					name: '是',
					value: 1
				}],
				radiolist2: [{
					name: '否',
					value: 0
				},{
					name: '是',
					value: 1
				}],
				showHotail: false
			}
		},
		onLoad() {
			this.getInvitationData()
		},
		onShareAppMessage(res) {
			return {
				title: '黄石国投数产诚邀您',
				path: `/subpage/invitation/index`,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			handlePay() {
				console.log(this.hasLogin, 'this.hasLogin')
				if (this.hasLogin) {
					this.show = true
				} else {
					this.toLogin()
				}

			},
			
			handleChangeOrder(val) {
				this.showHotail = val === 1
				if (val === 0) {
					this.applyForm.roomNumber = ''
				}
			},
			
			hamdleChangeRadio(n) {
				this.applyForm.isDue = n
				console.log(this.applyForm.isDue, n, 999)
			},

			// 开启弹窗
			dateOpen() {
				this.$refs.dateTimePop.open(this.applyForm.departureTime || '');
			},
			// 关闭弹窗
			timeOk(str, obj) {
				this.applyForm.departureTime = obj[4] + ':00'
			},


			toLogin() {
				uni.showModal({
					title: '提示',
					content: '请先完成登录',
					cancelText: '取消',
					confirmText: '去登录',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/me/mobile_login'
							})
						}
					}
				})
			},

			close() {

			},
			submit() {
				if (!this.applyForm.exhibName) {
					uni.showToast({
						title: '请输入出席人姓名',
						icon: 'none'
					})
					return
				}
				
				if (!this.applyForm.orgName) {
					uni.showToast({
						title: '请输入单位全称及职务',
						icon: 'none'
					})
					return
				}

				if (!this.applyForm.exhibPhone) {
					uni.showToast({
						title: '请输入联系人电话',
						icon: 'none'
					})
					return
				} 
				
				if (!this.applyForm.peerNumber) {
					uni.showToast({
						title: '请输入随行人数',
						icon: 'none'
					})
					return
				}
				
				
				
				if (this.applyForm.departureTime == '') {
					uni.showToast({
						title: '请输入到达日期',
						icon: 'none'
					})
					return
				}
				if (this.applyForm.isDue === 1) {
					if (!this.applyForm.roomNumber) {
						uni.showToast({
							title: '请输入预定房间数量',
							icon: 'none'
						})
						return
					}
				}
				
				uni.showLoading({
					mask: true
				})
				
				console.log(this.applyForm, 'this.applyForm')
				applyInvitaion(this.applyForm).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '参会成功！'
						})
						this.getInvitationData()
					} else {
						uni.showToast({
							title: '参会失败！'
						})
					}
					this.show = false
					uni.hideLoading()
				})
			},
			async getInvitationData() {
				uni.showLoading({
					mask: true
				})
				const inviData = await invitaionInfo()
				console.log(inviData, 'inviData')
				if (inviData.code === 200) {
					this.invitaInfo = inviData.data
				}
			},
			loadImg() {
				uni.hideLoading()
			},
			handleCancel() {
				this.show = false
				for (var key in this.applyForm) {
					if (this.applyForm.hasOwnProperty(key)) {
						this.applyForm[key] = null
					}
				}
			},
			handleNav() {
				uni.openLocation({
					latitude: 30.125417,
					longitude: 115.057795,
					name: '黄石未来科技城',
					address: '黄石未来科技城1号楼(黄石经济技术开发区·铁山区奥体大道149号，奥体中心对面)'
				})
			},
			navigateToMiniProgram() {
				uni.navigateToMiniProgram({
					appId: '',
					path: ''
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.map-location-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.main-img {
			width: 100% !important;
		}

		.footer-btn {
			position: fixed;
			left: 27%;
			bottom: 40rpx;
			width: 40%;
			margin: 0 auto;
			font-weight: 600;
			border-radius: 16rpx;
			color: #fff;
			background-color: #2878ff;
			z-index: 999;

			&.is-apply {
				background-color: #f7f7f7;
				color: rgba(0, 0, 0, .3);
			}

			&::after {
				border: 0;
			}
		}

		.nav-btn {
			position: fixed;
			left: 5%;
			bottom: 40rpx;
			width: 20%;
			margin: 0 auto;
			font-weight: 600;
			border-radius: 16rpx;
			color: #fff;
			background-color: #2878ff;
			z-index: 999;

			&::after {
				border: 0;
			}
			
			
		}
		.xiaochengxu {
			position: fixed;
			right: 5%;
			bottom: 40rpx;
			width: 200rpx;
			height: 90rpx;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/hxs.png') no-repeat center;
			background-size: 100% 100%;
		}
	}

	/deep/ .u-popup {
		overflow: hidden;
	}

	/deep/ .u-form {
		width: 640rpx;
		padding: 32rpx 40rpx;
		box-sizing: border-box;
		max-height: 80vh;
		overflow-y: auto;
	}
</style>